fix(form-field): autofill background overrides error, disabled and overlay states (#DS-4096) - #1893
Draft
lskramarov wants to merge 7 commits into
Draft
fix(form-field): autofill background overrides error, disabled and overlay states (#DS-4096)#1893lskramarov wants to merge 7 commits into
lskramarov wants to merge 7 commits into
Conversation
|
Visit the preview URL for this PR (updated for commit b98afeb): https://koobiq-next--prs-1893-15tash4n.web.app (expires Mon, 17 Aug 2026 07:33:42 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves how <kbq-form-field> handles browser autofill styling so that autofill tinting no longer overrides higher-priority states (error/disabled/focus/inOverlay) and so the UA autofill background/text are reliably masked across states. It also introduces a small public autofill-tracking API (signals) so components and consumers can react to autofill state.
Changes:
- Add
kbqInjectAutofilled()(core) and expose anautofilledSignal<boolean>on autofill-capable controls; forward it throughKbqTagList, and surfaceKbqFormField.autofilled+kbq-form-field_autofilledhost class. - Rework form-field SCSS/theme to resolve state precedence via tokens/specificity and repaint UA autofill background/text via a mask using the “current state” resolved CSS variables.
- Add coverage and verification scaffolding (unit tests, e2e fixtures, dev harness) plus docs and spelling dictionary updates.
Reviewed changes
Copilot reviewed 29 out of 42 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/textarea.api.md | Public API snapshot updated for KbqTextarea.autofilled signal. |
| tools/public_api_guard/components/tags.api.md | Public API snapshot updated for KbqTagInput/KbqTagList autofill signal exposure. |
| tools/public_api_guard/components/input.api.md | Public API snapshot updated for KbqInput/KbqInputPassword.autofilled. |
| tools/public_api_guard/components/form-field.api.md | Public API snapshot updated for KbqFormField.autofilled + control contract change. |
| tools/public_api_guard/components/core.api.md | Public API snapshot updated to export kbqInjectAutofilled. |
| tools/cspell-locales/ru.json | Add RU spelling entry for new autofill docs text. |
| tools/cspell-locales/en.json | Add EN spelling entries for new autofill-related terms. |
| packages/components/textarea/textarea.component.ts | Expose autofilled signal via kbqInjectAutofilled() on textarea control. |
| packages/components/textarea/e2e.ts | Add autofill visual/state fixtures for textarea form-field cases. |
| packages/components/tags/tag-text-control.ts | Extend tag text control contract to optionally expose autofilled signal. |
| packages/components/tags/tag-list.component.ts | Forward autofill state from the registered tag input via a computed signal. |
| packages/components/tags/tag-input.ts | Expose autofilled signal on the actual autofillable tag input. |
| packages/components/tags/e2e.ts | Add autofill fixture for tags to validate styling precedence. |
| packages/components/input/input.ts | Expose autofilled signal via kbqInjectAutofilled() on input control. |
| packages/components/input/input-password.ts | Expose autofilled signal via kbqInjectAutofilled() on password input control. |
| packages/components/input/e2e.ts | Extend state grid to include “autofill” combinations and styling checks. |
| packages/components/form-field/form-field.ts | Add kbq-form-field_autofilled host class binding + autofilled getter. |
| packages/components/form-field/form-field.scss | Adjust focus-ring/autofill interactions and ensure autofill tokens don’t override other states. |
| packages/components/form-field/form-field.ru.md | Document autofill behavior and customization tokens (RU). |
| packages/components/form-field/form-field.en.md | Document autofill behavior and customization tokens (EN). |
| packages/components/form-field/form-field-tokens.scss | Update autofill token defaults/semantics (border vs background intent). |
| packages/components/form-field/form-field-control.ts | Extend control contract to optionally provide autofilled signal. |
| packages/components/form-field/autofill.spec.ts | Add unit tests for autofill detection, forwarding, and teardown. |
| packages/components/form-field/_form-field-theme.scss | Rework state resolution + autofill masking to respect state precedence without !important/:has(). |
| packages/components/core/common-behaviors/index.ts | Re-export autofill behavior from common behaviors barrel. |
| packages/components/core/common-behaviors/autofill.ts | Implement kbqInjectAutofilled() using CDK AutofillMonitor and signals. |
| packages/components-dev/input/template.html | Add dev page section to render the new autofill harness. |
| packages/components-dev/input/module.ts | Register DevAutofill in the input dev examples module. |
| packages/components-dev/input/autofill.ts | Add manual, real-browser autofill harness for DS-4096 verification. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
NikGurev
reviewed
Aug 13, 2026
lskramarov
marked this pull request as draft
August 13, 2026 17:48
…erlay states (#DS-4096)
…nd the value (#DS-4096)
… over CDP (#DS-4096)
… :autofill (#DS-4096)
lskramarov
force-pushed
the
fix/DS-4096
branch
from
August 14, 2026 07:29
d79cc5a to
b98afeb
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.